<template>
    <div>
        <div v-if="loginflag==true" style="width: 450px;height: 400px;background-color: aliceblue;padding: 30px;margin: auto;">
            <div style="text-align: center;">
                <span>
                    <b>
                        欢迎登录
                    </b>
                </span>
            </div>
            <div style="margin-left: 20px;margin-top: 20px;">
                <span>
                    <b>
                        账号
                    </b>
                </span>
            </div>
            <div style="margin-left: 20px;margin-top: 10px;">
                <input type="text" placeholder="请输入邮箱" v-model="userlogin.emcil">
            </div>
            <div style="margin-left: 20px;margin-top: 20px;">
                <span>
                    <b>
                        密码
                    </b>
                </span>
            </div>
            <div style="margin-left: 20px;margin-top: 10px;">
                <input type="password" placeholder="请输入密码" v-model="userlogin.password">
            </div>
            <div style="margin-left: 20px;margin-top: 20px;display: flex;">
                <input type="checkbox" name="" @change="changeBtn" v-model="userlogin.checkVal"  id="check_input">&ensp;
                <span style="font-size: 12px;color: gray;">
                    同意用户协议
                </span>
            </div>
            <div style="margin-left: 20px;margin-top: 20px;">
                <button @click="login" style="width: 94%;height: 45px;color: white;font-size: 18px;border: none;border-radius: 10px;background-color: blueviolet;">
                    立即登录
                </button>
            </div>
            <div style="margin-left: 20px;margin-top: 20px;">
                <span>
                    没有账户？
                    <button style="border: none;color: blue;background-color: aliceblue;font-size: 12px;" @click="loginflag=false">
                        注册
                    </button>
                </span>
            </div>
        </div>
        <div v-if="loginflag==false" style="width: 450px;height: 400px;background-color: aliceblue;padding: 30px;margin: auto;">
            <div style="text-align: center;">
                <span>
                    <b>
                        账号注册
                    </b>
                </span>
            </div>
            <div style="margin-left: 20px;margin-top: 20px;">
                <span>
                    <b>
                        账号
                    </b>
                </span>
            </div>
            <div style="margin-left: 20px;margin-top: 10px;">
                <input type="text" placeholder="请输入用户名" v-model="userreg.username">
            </div>
            <div style="margin-left: 20px;margin-top: 20px;">
                <span>
                    <b>
                        邮箱
                    </b>
                </span>
            </div>
            <div style="margin-left: 20px;margin-top: 10px;">
                <input type="text" placeholder="请输入邮箱" v-model="userreg.emcil">
            </div>
            <div style="margin-left: 20px;margin-top: 20px;">
                <span>
                    <b>
                        密码
                    </b>
                </span>
            </div>
            <div style="margin-left: 20px;margin-top: 10px;">
                <input type="password" placeholder="请输入密码" v-model="userreg.password">
            </div>
            <div style="margin-left: 20px;margin-top: 20px;">
                <button @click="reg" style="width: 94%;height: 45px;color: white;font-size: 18px;border: none;border-radius: 10px;background-color: blueviolet;">
                    注册并登录
                </button>
            </div>
            <div style="margin-left: 20px;margin-top: 20px;">
                <span>
                    已经有账户了？
                    <button style="border: none;color: blue;background-color: aliceblue;font-size: 12px;" @click="loginflag=true">
                        登录
                    </button>
                </span>
            </div>
        </div>
    </div>
</template>

<script>
import { post } from '../utils/request';
import { ElMessage } from 'element-plus'

export default {
    data() {
        return {
            // 输入框绑定的数据
            userlogin: {
                emcil: '',
                password: '',
                checkVal: false,
            },
            userreg: {
                username: '',
                emcil: '',
                password: '',
            },
            loginflag: true,
        }
    },
    methods: {
        sessmsg(msg) {
            ElMessage({
                message: msg,
                type: 'success',
            })  
        },
        errmsg(msg) {
            setTimeout(() => {
                //代码
                ElMessage.error(msg)  
            }, 500);
        },
        login() {
            // 判断用户是否勾选用户协议
            if (this.userlogin.checkVal == false) {
                
                this.errmsg('请勾选用户协议')
            }  
            else {
                // 请求登录代码
                post('http://127.0.0.1:5000/jiaoyu/login', this.userlogin)
                .then((resp) => {
                    console.log(resp);
                    if (resp.data.code==200) {
                        this.sessmsg(resp.data.msg)
                        localStorage.setItem('user_id', resp.data.user_id)
                        this.getUser()
                    }
                    else {
                        //代码
                        this.errmsg(resp.data.msg)
                    }
                }).catch((err) => {
                    console.log(err);
                });
            }
        },
        reg() {
            post('http://127.0.0.1:5000/jiaoyu/reg', this.userreg)
            .then((resp) => {
                console.log(resp);
                if (resp.data.code==200) {
                    this.sessmsg(resp.data.msg)
                    localStorage.setItem('user_id', resp.data.user_id)
                    this.getUser()
                }
                else {
                    this.errmsg(resp.data.msg)
                }
            }).catch((err) => {
                console.log(err);
            });
        },
        changeBtn() {
            console.log(this.checkVal);
        },
        getUser() {
            // 判断本地是否存在用户token，没有则返回登录页，否则在页面加载时根据token获取用户信息，跳转到首页
            if (localStorage.getItem('user_id') == undefined) {
                this.$router.push('/')
            } 
            else {
                this.$router.push('/home')
            }
        },
    },
    mounted() {
        this.getUser();
    },
    components: {

    }
}
</script>

<style scoped>
input{
    width: 90%;
    height: 20px;
    padding: 8px;
    border-radius: 10px;
    outline: none;
    border: 0.1px solid gray;
    font-size: 14px;
}
#check_input{
    width: 15px;
    height: 15px;
}
</style>